<template>
  <div class="side-menu" :class="{ 'collapsed': isCollapsed }">
    <!-- 菜单头部 -->
    <div class="menu-header">
      <h2 class="menu-title">{{ title }}</h2>
      <div class="menu-actions">
        <button 
          v-if="!isCollapsed"
          class="help-button" 
          @click="handleHelpClick" 
          tabindex="0" 
          aria-label="显示帮助信息"
          @keydown.enter="handleHelpClick"
        >
          <span class="question-mark">?</span>
        </button>
        <button 
          class="collapse-button" 
          @click="handleCollapseClick" 
          tabindex="0" 
          aria-label="折叠或展开菜单"
          @keydown.enter="handleCollapseClick"
        >
          <span class="collapse-icon">{{ isCollapsed ? '›' : '‹' }}</span>
        </button>
      </div>
    </div>

    <!-- 帮助文本 -->
    <div class="help-text" v-if="showHelp && !isCollapsed">
      <p>{{ helpText }}</p>
    </div>

    <!-- 菜单列表 -->
    <ul class="menu-list" v-if="!isCollapsed">
      <li 
        v-for="(item, index) in menuItems" 
        :key="index"
        class="menu-item"
        :class="{ 'active': isActive(item) }"
      >
        <a 
          href="javascript:void(0)" 
          @click="handleItemClick(item)" 
          tabindex="0"
          :aria-label="`选择${item.name}`"
          @keydown.enter="handleItemClick(item)"
        >
          {{ item.name }}
          <div class="star-rating">
            <span v-for="i in 5" :key="i" class="star" :class="{ 'filled': i <= item.star }">
              ★
            </span>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

// 定义属性
const props = defineProps({
  title: {
    type: String,
    default: 'Menu'
  },
  helpText: {
    type: String,
    default: ''
  },
  menuItems: {
    type: Array,
    default: () => []
  },
  isCollapsed: {
    type: Boolean,
    default: false
  },
  currentItem: {
    type: Object,
    default: null
  }
});

// 定义事件
const emit = defineEmits(['toggle-collapse', 'select-item']);

// 状态
const showHelp = ref(false);

// 判断菜单项是否激活
const isActive = (item) => {
  // 通过比较当前项与传入的菜单项来判断是否激活
  // 这里假设menuItems中的每个项目都有唯一的url或name
  const currentPath = window.location.pathname;
  
  // 优先检查URL匹配
  if (item.url) {
    // 移除URL中的域名部分，只比较路径
    const itemPath = new URL(item.url, window.location.origin).pathname;
    if (currentPath === itemPath) return true;
  }
  
  // 检查是否为当前选中项
  if (props.currentItem) {
    // 比较对象引用或者比较关键属性
    if (item === props.currentItem) return true;
    
    // 比较URL
    if (item.url && props.currentItem.url && item.url === props.currentItem.url) return true;
    
    // 比较name
    if (item.name && props.currentItem.name && item.name === props.currentItem.name) return true;
  }
  
  return false;
};

// 处理帮助按钮点击
const handleHelpClick = () => {
  showHelp.value = !showHelp.value;
};

// 处理折叠按钮点击
const handleCollapseClick = () => {
  emit('toggle-collapse');
};

// 处理菜单项点击
const handleItemClick = (item) => {
  emit('select-item', item);
};
</script>

<style scoped>
.side-menu {
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 100%;
  background-color: #121a24; /* 夜空黑色调 */
  color: #ecf0f1;
  transition: all 0.3s ease;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.collapsed {
  width: 50px;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #1e2a38;
  background-color: #0c131c;
}

.menu-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-actions {
  display: flex;
  align-items: center;
}

.help-button, .collapse-button {
  background: none;
  border: none;
  color: #ecf0f1;
  font-size: 1.2rem;
  cursor: pointer;
  margin-left: 10px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  transition: background-color 0.2s ease;
}

.help-button:hover, .collapse-button:hover {
  background-color: #1e2a38;
  color: #3498db;
}

.help-button:focus, .collapse-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(236, 240, 241, 0.5);
}

.question-mark {
  font-weight: bold;
}

.collapse-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.help-text {
  padding: 15px;
  background-color: #2d3748;
  color: #e2e8f0;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 10px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s ease;
  border: 1px solid #4a5568;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex-grow: 1;
}

.menu-item {
  padding: 0;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.menu-item a {
  display: block;
  padding: 12px 15px 12px 12px;
  color: #ecf0f1;
  text-decoration: none;
  transition: all 0.2s ease;
}

.star-rating {
  display: flex;
  margin-top: 5px;
}

.star {
  color: #4a5568;
  font-size: 0.9em;
  margin-right: 2px;
}

.star.filled {
  color: #fbbf24;
}

.menu-item:hover {
  background-color: #1e2a38;
  border-left: 3px solid #3498db;
}

.menu-item.active {
  background-color: #1e3a59;
  border-left: 3px solid #3498db;
  box-shadow: inset 0 0 10px rgba(52, 152, 219, 0.5);
}

.menu-item.active a {
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .side-menu {
    position: absolute;
    left: 0;
    top: 0;
  }
  
  .collapsed {
    transform: translateX(-100%);
    box-shadow: none;
  }
}
</style>